<template>
  {{ form }}
  <NvCrud ref="crudRef" v-model:form="form" :option :data>
    <template #row_actions_view="{ rowData, rowIndex, size, icon }">
      <NButton type="info" round :size @click="() => crudRef?.rowView(rowData)">
        查看{{ rowIndex + 1 }}行
        <template #icon>
          <component :is="icon" />
        </template>
      </NButton>
    </template>
    <template #row_actions_edit="{ rowData, size, icon }">
      <NButton type="warning" :size @click="() => crudRef?.rowEdit(rowData)">
        <template #icon>
          <component :is="icon" />
        </template>
      </NButton>
    </template>
    <template #row_actions_del="{ rowData, size }">
      <NButton
        type="error"
        :disabled="rowData.id % 2 === 1"
        :size
        @click="() => crudRef?.rowDel(rowData)"
      >
        删除
      </NButton>
    </template>
  </NvCrud>
</template>

<script setup lang="ts">
import type { NvCrudInst, NvCrudOption, RowData } from 'nv-crud'
import { NButton } from 'naive-ui'
import { NvCrud } from 'nv-crud'
import { ref } from 'vue'

const crudRef = ref<NvCrudInst>()

const form = ref<RowData>({})
const data = Array.from({ length: 3 }, (_, i) => ({
  id: i + 1,
  name: `name${i + 1}`,
  sex: i % 2 === 0 ? '男' : '女',
  age: i + 1,
}))

const option: NvCrudOption = {
  actionbar: false,
  toolbar: false,
  rowActions: {
    width: 280,
  },
  fields: {
    name: { title: '姓名' },
    sex: { title: '性别' },
    age: { title: '年龄' },
  },
}
</script>
